<template>
  <div>
    <van-nav-bar
      title="修改手机号"
      left-text="返回"
      right-text="完成"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <div>
      <van-cell-group>
        <van-field
          v-model="value"
          label="新手机号"
          placeholder="请输入用户名"
        />
      </van-cell-group>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { NavBar } from "vant";
import { Toast, Form, Field } from "vant";
Vue.use(NavBar);
Vue.use(Form);
Vue.use(Field);
export default {
  name: "phonenumber",
  data() {
    return {
      value: "",
    };
  },
  mounted() {
    // const  userId=localStorage.getItem("userId")
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      // Toast("按钮");
      // console.log("345678")
      var aa = this.value.length;
      console.log(aa)
      if(aa==11){
        const userId = localStorage.getItem("userId");
        this.axios({
          url: "http://localhost:3000/change_phone",
          method: "post",
          data: {
            data: this.value,
            userId: userId,
          },
        }).then((res)=>{
          // console.log("11111111")
          // console.log(res)
          if(res.data.affectedRows==1){
            Toast('修改成功')
            this.$router.push("management")
          }else{
            Toast("修改失败")
          }
        })
      }else{
         Toast("请输入正确的手机号")
      }
    },
  },
};
</script>
<style scoped>
/deep/.van-nav-bar__text {
  color: black;
}
/deep/.van-icon {
  color: black;
}
</style>